<template>
  <div style="background: #ececec; padding: 30px">
    <!-- 面包屑导航栏 -->
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 卡片视图区域 -->
    <div class="first">
      <el-row :gutter="75">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>考勤率</span>
            </div>
            <div id="container"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>考勤率</span>
            </div>
            <div id="containere" />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="second">
      <el-row>
        <el-col :span="24">
          <el-card class="box-card2">
            <div slot="header" class="clearfix">
              <span>考勤率</span>
            </div>
            <div id="containered" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>



<script>
//导入antv
import { Chart } from "@antv/g2";

export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    const data = [
      { year: "1991", value: 3 },
      { year: "1992", value: 4 },
      { year: "1993", value: 3.5 },
      { year: "1994", value: 5 },
      { year: "1995", value: 4.9 },
      { year: "1996", value: 6 },
      { year: "1997", value: 7 },
      { year: "1998", value: 9 },
      { year: "1999", value: 13 },
    ];
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 200,
    });

    chart.data(data);
    chart.scale({
      year: {
        range: [0, 1],
      },
      value: {
        min: 0,
        nice: true,
      },
    });

    chart.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
    });

    chart.line().position("year*value").label("value");
    chart.point().position("year*value");

    chart.render();

    const data1 = [
      { year: "1991", value: 15468 },
      { year: "1992", value: 16100 },
      { year: "1993", value: 15900 },
      { year: "1994", value: 17409 },
      { year: "1995", value: 17000 },
      { year: "1996", value: 31056 },
      { year: "1997", value: 31982 },
      { year: "1998", value: 32040 },
      { year: "1999", value: 33233 },
    ];
    const chart1 = new Chart({
      container: "containere",
      autoFit: true,
      height: 200,
    });

    chart1.data(data1);
    chart1.scale({
      value: {
        min: 10000,
        nice: true,
      },
      year: {
        range: [0, 1],
      },
    });
    chart1.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart1.axis("value", {
      label: {
        formatter: (val) => {
          return (+val / 10000).toFixed(1) + "k";
        },
      },
    });

    chart1.area().position("year*value");
    chart1.line().position("year*value");

    chart1.render();

    const data2 = [
      { year: "1951 年", sales: 38 },
      { year: "1952 年", sales: 52 },
      { year: "1956 年", sales: 61 },
      { year: "1957 年", sales: 145 },
      { year: "1958 年", sales: 48 },
      { year: "1959 年", sales: 38 },
      { year: "1960 年", sales: 38 },
      { year: "1962 年", sales: 38 },
    ];
    const chart2 = new Chart({
      container: "containered",
      autoFit: true,
      height: 500,
    });

    chart2.data(data2);
    chart2.scale("sales", {
      nice: true,
    });

    chart2.tooltip({
      showMarkers: false,
    });
    chart2.interaction("active-region");

    chart2.interval().position("year*sales");

    chart2.render();
  },
};
</script>


<style lang="less" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 580px;
}
.box-card1 {
  width: 580px;
}
.first {
  margin-bottom: 100px;
}
</style>
